
<template>
  <!-- <el-row>
    <el-col class="mb-4" :span="24">
      <el-button type="primary" @click="add3dTiles()">倾斜摄影模型</el-button>

      <el-button type="primary" @click="add3dTiles2()">手工模型</el-button>
    </el-col>
  </el-row> -->

  <el-row>
    <el-col :span="24" style="height: 80vh">
      <CesiumMap ref="cesiumMap" :tileSet="tileSet"></CesiumMap>
    </el-col>
  </el-row>
</template>
    
  
<script>
import CesiumMap from "../cesiumMap/index.vue";
import * as Cesium from "cesium";
import { ref, watch } from "vue";
const cesiumMap = ref(null);
let viewer = ref(null);
export default {
  components: { CesiumMap },
  data() {
    return {
      tileSet: {
        url: "http://124.223.23.99:9000/XSYY_3dTiles/tileset.json",
        maximumScreenSpaceError: 1
      }
    }
  },
  methods: {
    add3dTiles2: function () {
      console.log(Cesium.VERSION);

      let entity = viewer.entities.add({
        rectangle: {
          coordinates: Cesium.Rectangle.fromDegrees(103.0, 40.0, 105.0, 43.0),
          // material: "../images/Cesium_Logo_Color.jpg",
          // rotation: new Cesium.CallbackProperty(getRotationValue, false),//解决方案1

          classificationType: Cesium.ClassificationType.TERRAIN,
          height: 10000,
        },
      });
      // viewer.zoomTo(entity);


      // viewer.camera.flyTo({
      //   destination: Cesium.Cartesian3.fromDegrees(103.0, 40.0, 105.0, 43.0),
      // });

      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(103.0, 40.0, 70000.0),
      });

    },
    doTianditu: function () {
      let TOKEN_TIANDITU = "39c6ffb6b4ceb22a0dfad5975f58a495";

      viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=39c6ffb6b4ceb22a0dfad5975f58a495",
          layer: "tdtBasicLayer",
          style: "default",
          format: "image/jpeg",
          tileMatrixSetID: "GoogleMapsCompatible",
          maximumLevel: 18,
        })
      );

      viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url:
            "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" +
            TOKEN_TIANDITU,
          layer: "tdtAnnoLayer",
          style: "default",
          format: "image/jpeg",
          tileMatrixSetID: "GoogleMapsCompatible",
          show: true,
        })
      );
    },
  },
  setup() {
    return {
      cesiumMap,
    };
  },

  mounted() {
    viewer = cesiumMap.value.viewer;
    // viewer.imageryLayers.removeAll();
    this.doTianditu();
  },
};
</script>
  
<style scoped></style>
  